<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		
		
		
		<!-- 
		https://zhuanlan.zhihu.com/p/103771116
		 为什么要学jQuery？
		 使用JavaScript开发过程中，有许多的缺点：查找元素的方法单一、遍历数组很麻烦，通常要嵌套一大堆的for循环有兼容性问题			、想要实现简单的动画效果也很麻烦、代码冗余。
		 为了解决这些问题，我们在JavaScript开发中使用jQuery来提高开发效率
		 
		 1.1、jQuery简介
		 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
		 目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！jQuery官网地址：http://jquery.com/
		 jquery中文文档 http://jquery.yanzhihui.com/
		 
		 1.2、jQuery版本介绍
			 1.x （本教程所采用）
			 兼容老版本IE
			 文件较大，但兼容性最好
			 2.x
			 部分IE8及以下版本不支持
			 文件较小，执行效率更高
			 3.x
			 完全不再支持IE8及以下版本
			 提供了一些新的API
			 提供不包含AJAX/动画API的版本
		
		1.3、jQuery引入方式
		
			本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用。
			<head>
				<script src="jquery-1.9.1.min.js"></script>
			</head>    
			CDN引入：使用远程CDN资源库在线引入，避免了文件下载。https://www.bootcdn.cn/
			<head>
				<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			</head>   
			 
		1.4 选择器
		
			1.什么是jQuery选择器?
			jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。(注意：jQuery选择器返回的是jQuer				y对象。)
			jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
			jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
			
			2.jQuery 提供了以下过滤元素的方法
			$("div").has("p"); // 选择包含 p 元素的所有 div 元素
			$("div").not(".myClass") // 选择 class 不等于 myClass 的所有 div 元素
			$("div").eq(5); // 选择所有 div 元素中下标为 5 的 div 元素(因此可以用在循环中)
		
		1.5 jQuery操作元素的属性
			1.获取属性 
			$("#img1").attr("src"); // 1.6 版本以下使用这个，1.6 以上操作表单的时候，需要换成 prop
			$("#img1").prop("src");
			$("#fav").prop("checked"); // 用于单选框或者复选框
			2. 设置元素的属性值
			$('#img1').attr("src","test.jpg"); // 1.6 版本以下使用这个
			$('#img1').prop("src","test.jpg");
			$('#img1').prop({"src": "test.jpg", "alt": "Test Image" });
			3. jQuery操作元素的属性总结
			获取属性，需要传递一个属性名称参数传递到 prop 方法中，否则 jQuery 不清楚我们要获取哪个属性
			设置如果是设置一个属性，可以给 prop 传递两个参数：prop("属性名","属性值");
			设置多个属性，只需要传递一个 js 对象参数：prop({"属性1":"属性值1","属性2":"属性值2",.....});
		
		1.6jQuery 操作元素的样式
			1.操作样式
				获取元素的 css 样式
				$("div").css("width");
				设置元素的 css 样式
				$("div").css("width","30px");
				$("div").css("height","30px").css("background","red");
				$("div").css({"font-size":"30px","color":"red"}); // 同时设置多个样式属性
			2. jQuery 操作样式类名改变元素的样式
				$("#div1").addClass("divClass2") // 为 id 为 div1 的对象追加样式 divClass2
				$("#div1").removeClass("divClass") // 移除 id 为 div1 的对象的 class 名为 divClass 的样式
				$("#div1").removeClass("divClass divClass2") // 移除多个样式
				$("#div1").toggleClass("anotherClass") // 重复切换 anotherClass 样式
			3. jQuery 操作元素的样式总结
				jQuery 提供了 css 方法和 addClass 等给我们操作元素的样式属性
				css 的使用
				获取元素的外观样式 css("样式名称");
				设置元素的外观样式 css("样式名称","样式值"); css({"样式名称1":"样式1的值","样式名称2":"样式2的值",...})
				添加样式类名 addClass("样式类名1 样式类名2");
				移除样式类名 removeClass("样式类名1 样式类名2");
				切换样式类名 toggleClass("样式类名");
				css() 不仅可以获取行内样式，还可以获取嵌入式或外链式的样式
		1.7 2.51 筛选方法(重点)
			$('xx').parent(); 查找父级
			children(selector) 亲儿子
			finde('xxx') 相当于后代选择器
			siblings('xxx') 兄弟，不包括自己
			nextAll 之后的同辈元素
			prevtAll 之前的同辈
			hasClass('class' ) 检查是否含有特定类
			eq() 相当于 $('xxx:eq(2)')
			
			???jquery的排他思想 + 链式编程
		
		1.8 动画效果
		
			show
			hide
			toggle
			fadeIn
			fadeOut
			fadeToggle
			fadeTo
			
			动画animate
			animate(params,[speed],[easing],[fn])
		
		1.9 dom元素 增产改查
		
			创建元素  $('<li></li>')
			添加元素	  
					内部添加
					①添加到前面   $('ul').prepend(li) 
					② 添加到后面   element.append('内容') 
					外部添加
					③ 添加到 后面   $('.test').after(div)
					
			删除操作  
				$('ul').remove() //删除元素本身 自
				xxx.empty() //删除匹配的所有子节点,断子绝孙
			内容文本值
				.html()
				.text()
				.val() //表单的值
				.parents('选择器') //可以返回指定祖先元素
			
		1.10  事件
			
			 事件注册  element.事件(function(){})
			 click
			 mouseover
			 mouseout
			 blur
			 focus
			 change
			 keydown
			 keyup
			 resize
			 scroll等
		
		
		1.11 尺寸位置操作
		
			得到宽和高
			width() 
			height()
			
			innerWidth()
			innerHeight() //包含padding

			outerWidth()
			outerHeight() // 包含padding border
			
			包含padding border margin
			outerWidth(true)/outerHeight(true)
			
			位置
			offset() 距离文档的文职 有.top.left属性 (能看也能改)
			position() 带有父亲的坐标(只能看)
			scrollTop()/scrollLeft() 被卷去的长度

		 
		 
		 
		 jquery 案例
		 https://gitee.com/henaicang/jquery-demo.git
		 
		 链接：https://pan.baidu.com/s/1bKQJ4jKYQXBYkAIZBxa0ow 
		 提取码：zej1
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 -->
	</body>
</html>